import React, { useEffect, useState } from 'react'
import { Table, Button,  } from 'antd';
import { DeleteOutlined, EditOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
import axios from 'axios'
export default function Rightlist() {
  const [dataSource, setDataSource] = useState([])
  useEffect(()=>{
    axios.get('http://localhost:8000/roles').then(res => {
      // this.setState({
      //   dataSource: res.data
      // })
      console.log(res)
      setDataSource(res.data)
    })
  },[])
  const columns=[
    {
      title: 'ID',
      dataIndex: 'id',
    },
    {
      title: '权限名称',
      dataIndex: 'roleName',
    },
    {
      title:"操作",
      render: (key) => {
        return <div>
          <Button type="danger" shape="circle" onClick={() => { this.showConfirm(key) }} icon={<DeleteOutlined />} />
          {/* <Popover content={
            <div><Switch checked={key.pagepermisson == 1} onChange={()=>this.switchMethod(key)}></Switch></div>
          } title="页面配置项" trigger={key.pagepermisson === undefined?'':"click"} > */}
            <Button type="primary" shape="circle" icon={<EditOutlined />} />
          {/* </Popover> */}
        </div>
      }
    }
  ]
  const showConfirm=(item)=>{
    let _this = this
    confirm({
      title: 'Do you Want to delete these items?',
      icon: <ExclamationCircleOutlined />,
      content: 'Some descriptions',
      onOk() {
        _this.detaMethod(item)
      },
      onCancel() {
        // console.log('Cancel');
      },
    });
  }
  return (
    <div>
      <Table 
        dataSource={dataSource} 
        columns={columns} 
        pagination={{ pageSize: 5 }} 
        rowKey={(item)=>item.id}
      />;
    </div>
  )
}
